<template>
    <van-row>
        <div :id="chartid" style="width:100%;min-height:350px;padding 10px 0px" :style="chartStyle"></div>
    </van-row>
</template>

<script>
const echarts = require('echarts')
export default {
  name: 'AnalysisSankeyCharts',
  props: ['chartid', 'title', 'chartStyle'],
  data () {
    return {
      echarts: null,
      options: null
    }
  },
  mounted () {
    this.echarts = echarts.init(document.getElementById(this.chartid))
    this.options = {
      title: {
        text: this.title
      },
      tooltip: {
        show: true,
        formatter: '{b} : {c}'
      },
      series: {
        name: '桑基图',
        type: 'sankey',
        layout: 'none',
        draggable: false,
        label: {
          show: true,
          formatter: '{b}:{c}'
        },
        emphasis: {
          focus: 'adjacency'
        },
        data: [],
        links: []
      }
    }
  },
  methods: {
    renderData (p, v) {
      console.log(p)
      console.log(v)
      this.options.series.data = []
      if (p.length > 0) {
        for (let i = 0; i < p.length; i++) {
          let dataItem = {}
          dataItem.name = p[i].field
          dataItem.value = p[i].count
          this.options.series.data[i] = dataItem
        }
        for (let i = 0; i < v.length; i++) {
          let linkItem = {}
          linkItem.source = v[i].field2
          linkItem.target = v[i].field
          linkItem.value = v[i].count
          this.options.series.links[i] = linkItem
        }
        console.log(this.options)
        this.echarts.setOption(this.options)
      }
    }
  }
}
</script>

<style scoped lang="less">

</style>
